import {CITY_1, CITY_2} from '../variables';
import type {LngLat} from '@yandex/ymaps3-types';

window.map = null;

main();
async function main() {
    // For each object in the JS API, there is a React counterpart
    // To use the React version of the API, include the module @yandex/ymaps3-reactify
    const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
    const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
    const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapControls, YMapControlButton} =
        reactify.module(ymaps3);

    const {YMapZoomControl, YMapDefaultMarker} = reactify.module(
        await ymaps3.import('@yandex/ymaps3-default-ui-theme')
    );

    /** Returns `coords` shifted by `diff`. Always returns new array to illustrate rerender related problems. */
    function shift(coords: LngLat, diff: LngLat): LngLat {
        return [coords[0] + diff[0], coords[1] + diff[1]];
    }

    function App() {
        const [location, setLocation] = React.useState<{center: LngLat; zoom: number; duration?: number}>(
            CITY_1.location
        );
        const [counter, setCounter] = React.useState(0);

        return (
            /* Initialize the map and pass initialization parameters */
            <YMap location={reactify.useDefault(location, [location])} ref={(x) => (map = x)}>
                {/* Add a map scheme layer */}
                <YMapDefaultSchemeLayer />
                <YMapDefaultFeaturesLayer />

                {/* YMapZoomControl sets map's `location`. Our state `location` doesn't know anything about it */}
                <YMapControls position="right">
                    <YMapZoomControl />
                </YMapControls>

                <YMapControls position="top">
                    {/* Set map location with animation */}
                    <YMapControlButton
                        text={CITY_1.name}
                        onClick={() => setLocation({...CITY_1.location, duration: 1000})}
                    />
                    {/* Set map location. Create a copy of object to trigger `update` */}
                    <YMapControlButton text={CITY_2.name} onClick={() => setLocation({...CITY_2.location})} />
                    {/* Trigger rerender */}
                    <YMapControlButton text={`Rerender! ${counter}`} onClick={() => setCounter((x) => x + 1)} />
                </YMapControls>

                {/* Any rerender will update coordinates */}
                <YMapDefaultMarker
                    size="normal"
                    coordinates={shift(location.center, [-0.05, -0.05])}
                    draggable
                    title="without useDefault"
                    color="pink"
                />
                {/* Only rerenders with changed `location.center` will update coordinates */}
                <YMapDefaultMarker
                    size="normal"
                    coordinates={reactify.useDefault(shift(location.center, [0.05, 0.05]), [location.center])}
                    draggable
                    title="with useDefault"
                />
            </YMap>
        );
    }

    ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
        document.getElementById('app')
    );
}